<template>
	<view class="container" :style="{backgroundImage:'url('+loginMsg.bgImg+')'}">
		<view class="big-title">您好!</view>
		<view class="small-title">{{loginMsg.companyName?loginMsg.companyName:''}}</view>
		<view class="box">
			<view class="box-title">
				<view class="box-title-word" @click="passClick">
					<span :class="{tab:tabitem=='0'}" class="line-word">密码登录</span>
					<span class="line" :class="{tabLine:tabitem=='0'}" v-show="tabitem=='0'"></span>
				</view>
				<view class="box-title-pass" @click="phoneClick">
					<span :class="{tab:tabitem=='1'}" style="margin: 12rpx 0;">手机号登录</span>
					<span class="line" :class="{tabLine:tabitem=='1'}" v-show="tabitem=='1'"></span>
				</view>
			</view>
			<view class="" v-if="tabitem=='0'">
				<view class="login-account">
					<u-icon name="account" class="phone" height="48" width="55"></u-icon>
					<u-input v-model="username" placeholder="请输入账号" class="input" />
					<!-- <input type="text" placeholder="请输入账号" v-model="username"> -->
				</view>
				<view class="login-password" style="margin: 40rpx 0 50rpx 0;">
					<u-icon name="lock" class="phone" height="48" width="55"></u-icon>
					<u-input v-model="password" :type="'password'" placeholder="请输入密码" class="input"
						:password-icon="'true'" />
					<!-- <input type="password" placeholder="请输入密码" v-model="password" > -->
				</view>
				<!-- <view class="button" @click="accountLoginClick">登录</view> -->
				<u-button shape="circle" type="primary" plain @click="accountLoginClick">登录</u-button>
				<view class="tips">
					<view class="tips-left">还没有账号?</view>
					<view class="tips-right" @click="register">立即注册</view>
				</view>
			</view>
			<view class="" v-if="tabitem=='1'">
				<view class="login-account" style="margin-bottom: 40rpx;">
					<u-icon name="phone" class="phone" height="48" width="55"></u-icon>
					<u-input v-model="usernamePhone" placeholder="请输入手机号" class="input" />
					<!-- <input type="text" placeholder="请输入账号" v-model="usernamePhone"> -->
				</view>
				<view class="login-password"
					style="display: flex;align-items: center;margin-bottom: 50rpx;position: relative;">
					<view style="display: flex;align-items: center;width: 100%;">
						<u-icon name="info-circle" class="phone" height="48" width="55"></u-icon>
						<view style="width: 62%;display: flex;align-items: center;">
							<u-input v-model="passwordPhone" :type="'password'" placeholder="请输入验证码"
								:password-icon="'false'" class="input" style="width: 100%;" />
						</view>

						<!-- <input type="password" placeholder="请输入验证码" v-model="passwordPhone" style="width: 80%;"> -->
					</view>
					<!-- <span style="color: blue;width: 160rpx;position: absolute;z-index: 2;right: 0;">获取验证码</span> -->
					<span
						style="color: blue;width: 180rpx;position: absolute;z-index: 2;right: 0;text-align: right;margin-right: 10rpx;"
						@click="getCode">{{reconds}}{{miao}}{{getCodeData}}</span>
				</view>
				<view class="button" @click="phoneTabClcik">登录</view>
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="show" :content="content" :show-title="false"></u-modal>
	</view>
</template>


<script>
	import {
		accountLogin,
		loginData
	} from "@/apis/login.js";
	import {
		getCode
	} from "@/apis/code.js"

	export default {
		data() {
			return {
				username: '',
				usernamePhone: '',
				passwordPhone: '',
				password: '',
				show: false,
				content: '',
				tabitem: '0',
				reconds: '',
				miao: '',
				getCodeData: '获取验证码',
				timer: '',
				loginMsg: {}
			}
		},

		onShow() {
			loginData()
				.then(res => {
					if (res.code === 200) {
						this.loginMsg = res.data;
					}
				})
		},

		methods: {
			register() {
				// 在这里执行注册逻辑，比如发送请求到后端注册新用户
				uni.navigateTo({
					url: "/pages/register/register"
				})
			},
			goToLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			},

			passClick() {
				this.tabitem = '0'
			},
			phoneClick() {
				this.tabitem = '1'
			},
			async accountLoginClick() {
				//密码登录
				if (this.username === '') {
					this.content = '请输入账号';
					this.show = true;
					return;
				}
				if (this.password === '') {
					this.content = '请输入密码';
					this.show = true;
					return;
				}
				const login = await accountLogin({
					username: this.username,
					password: this.password
				});
				if (login.code == 200) {
					uni.setStorageSync("token", login.data
						.authorization);
					uni.setStorageSync("isFirstLogin", login.data
						.isFirstLogin);
					this.username = '';
					this.password = '';
					uni.switchTab({
						url: "/pages/index/index"
					})
					// setTimeout(()=>{
					// 	this.$refs.uToast.show({
					// 		title: '登录成功',
					// 		type: 'success'
					// 	})
					// },800)
				} else {
					this.show = true;
					this.content = login.msg
				}
			},
			beforedestroy() {
				//清除定时器
				clearInterval(this.timer)
			},
			//闭包函数 优化代码
			regExp(val) {
				return function(str) {
					return val.test(str);
				}
			},
			async phoneTabClcik() {
				//手机号登录
				if (this.usernamePhone === '') {
					this.content = '请输入手机号码';
					this.show = true;
					return;
				}

				const regExp = this.regExp(/^1[3456789]\d{9}$/);
				if (!regExp(this.usernamePhone)) {
					this.content = '请输入正确格式的手机号';
					this.show = true;
					return;
				}

				const login = await accountLogin({
					phoneNumber: this.usernamePhone,
					code: this.passwordPhone
				});

				if (this.passwordPhone === '') {
					this.content = '请输入验证码';
					this.show = true;
					return;
				}

				if (login.code == 200) {
					uni.setStorageSync("token", login.data
						.authorization);
					uni.setStorageSync("isFirstLogin", login.data
						.isFirstLogin);
					this.usernamePhone = '';
					this.passwordPhone = '';
					uni.switchTab({
						url: "/pages/index/index"
					})
					// setTimeout(()=>{
					// 	this.$refs.uToast.show({
					// 		title: '登录成功',
					// 		type: 'success'
					// 	})
					// },800)
				} else {
					this.show = true;
					this.content = login.msg;
				}
			},
			

			async getCode() {
				//验证码
				// if (this.getCodeData == '重新获取') return;
				if (this.timer) {
					clearInterval(this.timer)
				};
				const code = await getCode(this.usernamePhone);
				if (code.code != 200) {
					this.show = true;
					this.content = code.msg;
				} else {
					this.miao = '秒';
					this.reconds = '60';
					this.getCodeData = '重新获取'
					this.timer = setInterval(() => {
						if (this.reconds > '0') {
							this.reconds--;
						};
						if (this.reconds == '0') {
							this.miao = '';
							this.reconds = '';
							this.getCodeData = '重新获取'
						}
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100vw;
		height: 100vh;
		background-repeat: no-repeat;
		background-size: cover;
		// padding: 0 32rpx;
		// box-sizing: border-box;
		// background: url('https://sslc-oss.oss-cn-chengdu.aliyuncs.com/erp/static/login.png');
		// background-repeat: no-repeat;
		// background-size: cover;
		// background-color: #307FE8;
		padding: 200rpx 40rpx 0 40rpx;
		box-sizing: border-box;

		.big-title {
			color: white;
			font-size: 48rpx;
			font-weight: bold;
		}

		.small-title {
			color: white;
			font-size: 30rpx;
			margin: 30rpx 0;
		}

		.box {
			max-height: 550rpx;
			width: 100%;
			border-radius: 20rpx;
			background-color: white;
			padding: 30rpx 40rpx 40rpx 40rpx;
			box-sizing: border-box;

			.box-title {
				width: 100%;
				height: 80rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 40rpx;

				.box-title-word,
				.box-title-pass {
					height: 100%;
					width: 50%;
					display: flex;
					flex-direction: column;
					// justify-content: space-evenly;
					align-items: center;
					color: black;
					font-weight: bold;

					.line-word {
						margin: 12rpx 0;
					}

					.line {
						width: 32rpx;
						border: 3rpx solid black;
						border-radius: 20rpx;
					}

					.tabLine {
						border: 3rpx solid blue;
					}
				}

				.tab {
					color: blue;
				}
			}

			.login-account,
			.login-password {
				border: 1rpx solid white;
				width: 100%;
				height: 66rpx;
				padding: 24rpx;
				box-sizing: border-box;
				border-radius: 48rpx;
				border: 1rpx solid lightgray;
				display: flex;
				align-items: center;

				.phone {
					margin-right: 15rpx;
				}

				image {
					width: 36rpx;
					height: 32rpx;
					margin-right: 15rpx;
				}

				.input {
					height: 54rpx;
					width: 100%;
					margin-bottom: 16rpx;
				}
			}

			.button {
				height: 85rpx;
				width: 100%;
				background-color: blue;
				text-align: center;
				line-height: 85rpx;
				border-radius: 50rpx;
				font-size: 30rpx;
				color: white;
				transition: all .4s;
			}

			.button:active {
				background-color: rgba(0, 0, 0, 0.2);
				border-radius: 50rpx;
			}

			.tips {
				width: 100%;
				height: 70rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 20rpx;
				font-size: 24rpx;

				.tips-right {
					color: blue;
				}
			}


		}
	}
</style>